<template>
    <div class="InstructionsDetail">
        <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
        <div class="title_wrap">
            <span style="color: #333333;font-weight: 400;">报告名称：</span>
            <span v-if = "$route.query.type === 'view'" v-text = "InstructionsDetail.title"></span>
            <el-input v-model = "InstructionsDetail.title" v-if = "$route.query.type === 'create'" maxlength="50" placeholder = "请输入报告名称" style = "width:460px" clearable></el-input>
        </div>
        <div style="margin-top:20px;margin-bottom:80px;">
            <UploadFile 
                :title ="'附件'" :subTitle = "subTitle" :showUploadButton ="showUploadButton"
                :maxNumber ="1" :maxSize = "100" :fileTypes ="['PDF']" 
                :showDleteButton = "showDleteButton" :fileData = "InstructionsDetail.attachList" :actionUrl = "actionUrl" 
                @deletefile = "deleteFile"
                @uploadsuccess = "uploadSuccess"/>
        </div>
        <div class="sureButton" v-if = "$route.query.type === 'create'">
            <el-button type="reset" @click="cancel" style="margin-right: 10px;">取消</el-button>
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </div>
    </div>
</template>
<script>
export default {
    components: { 
        Breadcrumb : () => import('@/components/IncorruptibleArchives/Breadcrumb.vue'),
        UploadFile: () => import('../comonComponent/uploadFile')
    },
    data() {
        return {
            // 面包屑导航数据
            Breadcrumb: [
                { name: "监督举报", link: "" },
                { name: "信访举报", link: "" },
                { name: "请示报告详情", link: "" }
            ],
            InstructionsDetail: {
                attachList: [],
                title: ''
            },
            subTitle: '文件只支持PDF格式',
            showUploadButton: true,
            showDleteButton: true
        }
    },
    props: {

    },
    computed: {
        //图片获取根路径
        actionUrl() {
            return this.Api.uploadFile;
        },
    },
    created(){
        if(!this.$route.query.type) {
            this.$router.go('-1')
        }
        if (this.$route.query.type === 'view') {
            this.subTitle = ''
            this.showUploadButton = false
            this.showDleteButton = false
            this.InstructionsDetail = JSON.parse(sessionStorage.getItem('InstructionsDetail'))
            if (this.$route.query.id !== this.InstructionsDetail.id) {
                this.$router.go('-1')
            }
        } else if (this.$route.query.type === 'create'){
            this.subTitle = '文件只支持PDF格式'
            this.showUploadButton = true
            this.showDleteButton = true
            this.InstructionsDetail = {
                attachList: [],
                title: ''
            }
        } else {
            this.$router.go('-1')
        }
    },
    mounted() {
    },
    methods: {
        // 取消
       cancel() {
           this.$router.go(-1)
       },
        // 提交
       onSubmit() {
           if (this.InstructionsDetail.title.trim() === '') {
               this.$message.warning('请输入标题')
               return
           }
           if (this.InstructionsDetail.attachList.length === 0) {
               this.$message.warning('请上传附件')
               return
           }
           this.Api.getInstructionsAdd(this.InstructionsDetail).then(res => {
               if (res.code === '0') {
                   this.$message.success('新建请示报告成功')
                   this.$router.go(-1)
               }
           })
       },
       // 删除文件
        deleteFile (item, index) {
            this.InstructionsDetail.attachList.splice(index, 1)
            this.$message.success(`成功删除文件: ${item.name}`)
        },
        // 文件添加成功
        uploadSuccess (data) {
            this.InstructionsDetail.attachList.push(data)
        },
    }
}
</script>
<style lang="less" scoped>
    .InstructionsDetail{
        width: 100%;
        height: 100%;
        position: relative;
        .title_wrap {
            background-color: #FFFFFF;
            height: 84px;
            width: 100%;
            padding:20px;
            margin-top: 30px;
            display: flex;
			align-items: center;
        }
        .sureButton {
            position: fixed;
            bottom: 0;
            right: 0;
            width: 100%;
			padding: 10px 20px;
			background-color: #FFFFFF;
			display: flex;
			justify-content: flex-end;
			align-items: center;

		}
    }
</style>